/* ----------------------------------------------------------------------
	Media Queries
/* ---------------------------------------------------------------------- */


/* ----------------------------------------------------------------------
	For Small Desktop Devices [ 960px ]
/* ---------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {


	/* Basic Elements & Classes
 	 ---------------------------------------------------------------------- */
 	body { font-size:  13px; }
 	 

	/* Layout and content
	 ---------------------------------------------------------------------- */

	/* Container */
	.container { width: 960px; }

			
		/* Columns
		 -------------------------------- */
		.col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, .col-3-4 {
			margin-right: 20px;
		}
		.col-1-2 { width: 460px; }
		.col-1-3 { width: 300px; }
		.col-1-4 { width: 220px; }
		.col-2-3 { width: 620px; }
		.col-3-4 { width: 700px; }


		/* Main
		 -------------------------------- */
		#main, #main.main-medium { width: 700px; }
		#main.main-right { margin-left: 20px; }
		#main.main-left { margin-right: 20px; }


		/* Sidebar
		 -------------------------------- */
		.sidebar, .sidebar.main-medium { width: 220px; }


	/* Sections
 	 ---------------------------------------------------------------------- */

 	/* Newsletter
 	 ------------------------------------ */
	#subscribe-email {
		width: 352px;
	}


	/* Events List
 	 ------------------------------------ */

	.events-list .event-meta { width: 330px; }


	/* Elements
 	---------------------------------------------------------------------- */


	/* Masonry grids
	 ------------------------------------ */
	.masonry { margin-right: -20px; }
	
}


/* ----------------------------------------------------------------------
	For Tablet Devices [ 748px ]
/* ---------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 980px) {


	/* Layout and content
	 ---------------------------------------------------------------------- */

	/* Container */
	.container { width: 748px; }
		.container img { 
			max-width:100%;
			max-height:100%;
		}
			

		/* Columns
		 -------------------------------- */
		.col-1-2 { width: 364px; }
		.col-1-3 { width: 236px; }
		.col-2-3 { width: 492px; }
		.col-1-4 { width: 172px; }
		.col-3-4 { width: 556px; }


		/* Main
		 -------------------------------- */
		#main, #main.main-medium { width: 556px; }
		#main.main-right { margin-left: 20px; }
		#main.main-left { margin-right: 20px; }


		/* Sidebar
		 -------------------------------- */
		.sidebar, .sidebar.main-medium { width: 172px; }


	/* Navigation
	 ---------------------------------------------------------------------- */


 	/* Main Navigation
	 -------------------------------- */

	/* Menu height */
 	#main-nav-wrapper, #main-nav { height: 64px; }
 	#search-wrap { top:64px; }

	/* Navigation list */
 	#nav { display: none; }

	/* Responsive Nav */
	.dl-menuwrapper {
		float: right;
		display: block;
		position: absolute;
		right: 0px;
		top:0;
	}


	/* Icon navigation
	 -------------------------------- */
	#icon-nav { 
		position: absolute;
		right: 60px;
		top: 0;
		border: 0;
		z-index: 100;
		margin-top: 26px;
	}
	#icon-nav a span { font-size: 18px; }


 	/* Logo
	 -------------------------------- */
	#logo { top: 16px; }


	/* Sections
 	---------------------------------------------------------------------- */


 	/* Resize Intro
 	 --------------------------------*/
 	#ticker {
		height: 76px;
		font-size: 56px;
	}
	#ticker li {height: 56px;}


	/* Featured Events
 	 ------------------------------------ */
	/* Meta */
	.events-grid .event-meta {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		padding: 15px;
		color: #fff;
	}
		.events-grid .event-meta > span { display:  block; }
		.events-grid .event-location {
			font-size: 11px;
		}
		.events-grid .event-date {
			margin-top: 5px;
			font-size: 24px;
			font-weight: bold;
		}
		.events-grid .event-title {
			font-size: 14px;
			font-weight: bold;
		}
		.events-grid .event-artists {
			font-size: 12px;
			color: #fff;
			color: rgba( 255, 255, 255, 0.7 );
		}


	/* Newsletter
 	 ------------------------------------ */
	#subscribe-email {
		width: 246px;
	}


	/* Events List
 	 ------------------------------------ */
	.events-list .event-date-body {
		width: 90px;
		margin-left: 20px;
	}
	.events-list .event-meta {
		margin-left: 20px;
		margin-top: 30px;
		width: 290px;
	}


	/* Widgets
 	---------------------------------------------------------------------- */
 	.details-countdown .days, .details-countdown .hours, .details-countdown .minutes, .details-countdown .seconds {
		font-size: 30px;
	}


	/* Shortcodes
 	 ---------------------------------------------------------------------- */


	/* Tabs
	 ------------------------------------ */
	ul.tabs { 
		width:100%;
		height: auto;
		border: none;
		overflow: hidden;
	}
		ul.tabs li { 
			width: 100%;
		}
		ul.tabs li a { 
			margin: 0;
			width: 100%;
			border-width: 0px 1px 1px 1px;
		}
		ul.tabs li:first-child a { border-width: 1px 1px 1px 1px;}

}


/* ----------------------------------------------------------------------
	For Mobile Devices [ 300px ]
/* ---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* Layout and content
	 ---------------------------------------------------------------------- */

	/* Container */
	.container { width: 300px; }
		.container img { 
			max-width: 100%;
			max-height:100%;
		}
		
			
		/* Columns
		 -------------------------------- */
		.col-1-2,
		.col-1-3,
		.col-1-4,
		.col-1-5,
		.col-2-3,
		.col-3-4 { 
			width: 300px;
			margin-right:0;
		}
		.flex-col-1-2, 
		.flex-col-1-3,
		.flex-col-1-4,
		.flex-col-1-5  { 
			width: 50%;
		}


		/* Main
		 -------------------------------- */
		#main, #main.main-medium { width: 100% }
		#main.main-right { margin-left: 0; }
		#main.main-left { margin-right: 0; }


		/* Sidebar
		 -------------------------------- */
		.sidebar, .sidebar.main-medium { width: 100% }


	/* Navigation
	 ---------------------------------------------------------------------- */


 	/* Main Navigation
	 -------------------------------- */

	/* Menu height */
 	#main-nav-wrapper, #main-nav { height: 64px; }
 	#search-wrap { top:64px; }

	/* Navigation list */
 	#nav { display: none; }

	/* Responsive Nav */
	.dl-menuwrapper {
		float: right;
		display: block;
		position: absolute;
		right: 0px;
		top:0;
	}


	/* Icon navigation
	 -------------------------------- */
	#icon-nav { 
		position: absolute;
		right: 60px;
		top: 0;
		border: 0;
		z-index: 100;
		margin-top: 26px;
	}
	#icon-nav a span { font-size: 18px; }


 	/* Logo
	 -------------------------------- */
	#logo { top: 16px; }


	/* Sections
 	---------------------------------------------------------------------- */


 	/* Resize Intro
 	 --------------------------------*/
 	.intro-bg { display: none; }
 	#ticker-wrap { padding: 10px 0 20px; }
 	#ticker {
		height: 38px;
		font-size: 28px;
	}
	#ticker li {height: 28px;}


	/* Countdown
 	 ------------------------------------ */
	.countdown-wrap .days, .countdown-wrap .hours, .countdown-wrap .minutes, .countdown-wrap .seconds {
		font-size: 36px;
	}


	/* Newsletter
 	 ------------------------------------ */
 	 #newsletter { background-color: #121212; }
	.newsletter-left { display: none; }
	.newsletter-right { 
		width: 300px;
		padding: 22px 0;
	}
	.newsletter-title { display: none; }
	#subscribe-email { width: 216px; }

	/* Gallery
 	------------------------------------ */
	.gallery-2-col .gallery-item,
	.gallery-3-col .gallery-item,
	.gallery-4-col .gallery-item { width: 50%; }


	/* Events List
 	 ------------------------------------ */

	.events-list .event-date {
		display: block;
		position: relative;
		height: 40px;
	}
	.events-list .event-date .month {
		font-size: 22px;
		text-align:left;
		display:inline-block;
		margin-top: 8px;
		font-weight: bold;
	}
	.events-list .event-date .year {
		font-size: 14px;
		text-align:left;
		display:inline-block;
		margin-left: 0;
		top: 0;
	}
	.events-list .event-body { margin-left: 0; }
		.events-list .event-date-body {
			width: 90px;
			margin-left: 20px;
		}
			.events-list .event-meta {
				margin-left: 20px;
				margin-top: 30px;
				width: 290px;
			}
			.events-list a.event-button {
				float: right;
				margin:40px 30px 30px 30px;
			}


	/* Footer
 	 ---------------------------------------------------------------------- */
 	.footer-copyrights { text-align: left; }


 	/* Shortcodes
 	 ---------------------------------------------------------------------- */


	/* Tabs
	 ------------------------------------ */
	ul.tabs { 
		width:100%;
		height: auto;
		border: none;
		overflow: hidden;
	}
		ul.tabs li { 
			width: 100%;
		}
		ul.tabs li a { 
			margin: 0;
			width: 100%;
			border-width: 0px 1px 1px 1px;
		}
		ul.tabs li:first-child a { border-width: 1px 1px 1px 1px;}



	/* Plugins
 	 ---------------------------------------------------------------------- */

 	/* Carousel
 	 -------------------------------- */
 	.carousel-item { margin: 0; }


 	/* Nice Select
 	 -------------------------------- */
	.select_style.filter { width: 100%; margin-right: 0; }


	/* Page navigations
 	 ---------------------------------------------------------------------- */


	/* Page Nav
	 ------------------------------------ */
	.page-nav a { min-width: 148px; }


}


/* ----------------------------------------------------------------------
	For Mobile Devices [ 440px ] [ Horizontal ]
/* ---------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	

	/* Layout and content
	 ---------------------------------------------------------------------- */

	/* Container */
	.container { width: 440px; }


		/* Columns
		 -------------------------------- */
		.col-1-2,
		.col-1-3,
		.col-1-4,
		.col-1-5,
		.col-2-3,
		.col-3-4 { 
			width: 440px;
			margin-right:0;
		}
		.flex-col-1-3,
		.flex-col-1-2,
		.flex-col-1-4,
		.flex-col-1-5 { 
			width: 50%;
		}


	/* Sections
 	---------------------------------------------------------------------- */

	/* Countdown
 	 ------------------------------------ */
	.countdown-wrap .days, .countdown-wrap .hours, .countdown-wrap .minutes, .countdown-wrap .seconds {
		font-size: 48px;
	}


	/* Newsletter
 	 ------------------------------------ */
 	#newsletter { background-color: #666; }
	.newsletter-left { 
		width: 86px;
		display: block;
	}
	.newsletter-right { 
		width: 354px;
		padding: 22px;
	}
	.newsletter-icon {
		display: block;
	}
	.newsletter-title { display: none; }
	#subscribe-email { width: 226px; }


	/* Plugins
 	 ---------------------------------------------------------------------- */

		/* Carousel
	 	 ------------------------------------ */
		.carousel-item {
			width: 200px;
			margin: 0 10px;
		}
}


/* ----------------------------------------------------------------------
	For Events Table Only
/* ---------------------------------------------------------------------- */
@media (max-width: 50em) {
	table.responsive-table {
		box-shadow: none;  
	}
	table.responsive-table thead {
		display: none; 
	}
	table.display th,
	table.display td {
		padding: .8em 1em;
		border: 1px solid #444;
	}
	table.responsive-table td:nth-child(1):before {
		/*content: 'Date';*/
	}
	table.responsive-table td:nth-child(2):before {
		/*content: 'Event';*/
	}
	table.responsive-table td:nth-child(1),
	table.responsive-table td:nth-child(2) {
		/*padding-left: 25%;*/
	}
	table.responsive-table td:nth-child(1):before,
	table.responsive-table td:nth-child(2):before {
		position: absolute;
		left: .5em;
		font-weight: bold;
	}

	table.responsive-table tr,
	table.responsive-table td {
		display: block;
	}
	table.responsive-table tr {
		position: relative;
		margin-bottom: 1em;
	}
	table.responsive-table td {
		border-top: none;
	}
	table.responsive-table td.table-date {
		border-top: 1px solid #444;
	}
	table.responsive-table td.actions{
		position: absolute;
		top: 0;
		right: 0;
		border: none;
		background: none;
	}
}